window.addEventListener('load', async function () {
   const {
      data
   } = await axios.get('/dashboard')
   console.log(data)

   // 在事件内渲染图表 传递参数
   gai(data.data.overview) //概览
   zhe(data.data.year) //平均薪资
   bing(data.data.salaryData) //薪资分布
   zhu(data.data.groupData) //每组薪资
   bing2(data.data.salaryData) //男女薪资
   di(data.data.provinceData) //省份数据
})
// 数据概览-------------------------------------------------------------------
const gai = data => {
   console.log(data)
   // 把数据循环渲染到页面
   // 利用对象的keys方法 循环遍历属性值
   Object.keys(data).forEach(item => {
      document.querySelector(`[name="${item}"]`).innerHTML = data[item]
   })
}

// 折线图-------------------------------------------------------------------
const zhe = data => {
   const year = data.map(item => item.month)
   const money = data.map(item => item.salary)

   // 把图表填入盒子
   const myChart = echarts.init(document.querySelector('#line'))
   // 4.2图标样式 指定图表的配置和数据
   const option = {
      // 鼠标移入的提示
      tooltip: {
         trigger: 'axis',
         position: function (pt) {
            return [pt[0], '20%'];
         }
      },
      // 主标题
      title: {
         left: '20',
         text: '2021全学科薪资走势'
      },
      //右上工具栏
      toolbox: {
         feature: {
            dataZoom: {
               yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
         }
      },

      // x轴 必须的元素
      xAxis: {
         type: 'category',
         boundaryGap: false,
         data: year
      },
      // y轴 必须属性
      yAxis: {
         type: 'value',
         boundaryGap: [0, '100%']
      },
      // 内容的数据
      series: [{
         name: '薪资走势',
         // 图表类型
         type: 'line',
         // 圈圈大小
         symbolSize: 8,
         // 圈圈类型
         symbol: 'emptyCircle',
         sampling: 'lttb',
         itemStyle: {
            color: 'rgb(40, 136, 239)'
         },
         // 曲线
         smooth: true,
         areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgb(121, 188, 249)'
               },
               {
                  offset: 1,
                  color: '#fff'
               }
            ])
         },
         // 数据
         data: money
      }]
   };
   // 4.3 使用指定的配置项和数据显示图表
   myChart.setOption(option)
}

// 饼图-------------------------------------------------------------------
const bing = data => {
   const newArr = data.map(item => ({
      value: item.g_count + item.b_count,
      name: item.label
   }))

   const myChart = echarts.init(document.querySelector('#salary'))
   const m2R2Data = newArr
   console.log(newArr)
   const option = {
      title: [{
         text: '班级薪资分布',
         textStyle: {
            fontSize: 16,
            color: "black"
         },
         left: "2%"
      }, ],
      tooltip: {
         trigger: 'item',
         formatter: function (parms) {
            var str = parms.seriesName + "</br>" +
               parms.marker + "" + parms.data.legendname + "</br>" +
               "数量：" + parms.data.value + "</br>" +
               "占比：" + parms.percent + "%";
            return str;
         }
      },
      legend: {
         // 详情数量多的时候可以溢出隐藏 滚动
         type: "scroll",
         // 排列方向
         orient: 'horizontal',
         left: 'center',
         align: 'left',
         top: 'bottom',
         textStyle: {
            color: '#8C8C8C'
         },
         height: 250
      },
      series: [{
         name: '薪资',
         type: 'pie',
         // 饼图圆心的位置
         center: ['50%', '50%'],
         // 内外圆的直径
         radius: ['50%', '40%'],
         clockwise: false, //饼图的扇区是否是顺时针排布
         //  数据过多时避免文字被遮挡
         avoidLabelOverlap: true,
         label: {
            normal: {
               show: true,
               position: 'outter',
               formatter: function (parms) {
                  return parms.data.legendname
               }
            }
         },
         // 饼图样式 
         itemStyle: {
            // 圆角
            borderRadius: 15,
            // 圆角缺失部分颜色
            borderColor: '#fff',
            borderWidth: 2
         },
         labelLine: {
            normal: {
               // 文字指示线的长度
               length: 20,
               //   第二根线的长度
               length2: 10,
               //   指示线的圆角
               smooth: true,
            },

         },
         data: m2R2Data
      }]
   };
   myChart.setOption(option)
}

// 柱状图-------------------------------------------------------------------
const zhu = data => {

   const name = data[1].map(item => item.name)
   const two = data[1].map(item => item.hope_salary)
   const one = data[1].map(item => item.salary)

   const myChart = echarts.init(document.querySelector('#lines'))
   const option = {
      // 标题
      title: {
         text: '班级每组薪资',
         left: 10
      },
      // 鼠标移入的提示
      tooltip: {
         trigger: 'axis',
         axisPointer: {
            type: 'shadow'
         }
      },
      // 顶部圈圈提示
      // legend: {},
      // 调整内边距
      grid: {
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
      },
      // x轴
      xAxis: [{
         type: 'category',
         data: name
      }],
      yAxis: [{
         type: 'value'
      }],
      // 图表内容
      series: [{
            name: '期望薪资',
            type: 'bar',
            // 鼠标移入 隐藏其他柱子 自己高亮
            emphasis: {
               focus: 'series'
            },
            itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                     offset: 0,
                     color: '#00db9f'
                  },
                  {
                     offset: 0.7,
                     color: '#4be5c2'
                  },
                  {
                     offset: 1,
                     color: '#b7f4e4'
                  }
               ])
            },
            data: one
         },
         {
            name: '实际薪资',
            type: 'bar',
            // 堆叠柱子 相同的stark会堆叠在一起
            stack: '1',
            // 鼠标移入 隐藏其他柱子 自己高亮
            emphasis: {
               focus: 'series'
            },
            itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                     offset: 0,
                     color: '#00abe8'
                  },
                  {
                     offset: 0.7,
                     color: '#00c6f5'
                  },
                  {
                     offset: 1,
                     color: '#a8e3fc'
                  }
               ])
            },
            data: two
         },
      ]
   };
   myChart.setOption(option)

   document.querySelector('#btns').addEventListener('click', function (e) {
      if (e.target.tagName === 'BUTTON') {
         const name = data[e.target.innerHTML].map(item => item.name)
         const two = data[e.target.innerHTML].map(item => item.hope_salary)
         const one = data[e.target.innerHTML].map(item => item.salary)
         option.xAxis[0].data = name
         option.series[0].data = one
         option.series[1].data = two
         myChart.setOption(option)

      }
   })
}

// 饼图02-------------------------------------------------------------------
const bing2 = data => {
   console.log(data)
   const nan = data.map(item => ({
      name: item.label,
      value: item.b_count
   }))
   const nv = data.map(item => ({
      name: item.label,
      value: item.g_count
   }))

   let myChart = echarts.init(document.querySelector('#gender'));

   // 3.2 指定图表的配置项和数据
   let option = {
      // 1.标题
      title: [{
            text: '男女薪资分布',
            left: 10,
            top: 10,
            textStyle: {
               fontSize: 16,
            },
         },
         {
            text: '男生',
            left: '50%',
            top: '50%',
            textAlign: 'center',
            textStyle: {
               fontSize: 12,
            },
         },
         {
            text: '女生',
            left: '50%',
            top: '90%',
            textAlign: 'center',
            textStyle: {
               fontSize: 12,
            },
         },
      ],
      // 2.鼠标移入提示
      tooltip: {
         trigger: 'item'
      },
      itemStyle: {
         // 圆角
         borderRadius: 10,
         // 圆角缺失部分颜色
         borderColor: '#fff',
         borderWidth: 2
      },
      // 3.颜色
      color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
      // 4.内容
      series: [{
            type: 'pie',
            radius: 50,
            radius: ['20%', '30%'],
            center: ['50%', '30%'],
            datasetIndex: 1,
            data: nan

         },
         {
            type: 'pie',
            radius: 50,
            radius: ['20%', '30%'],
            center: ['50%', '75%'],
            datasetIndex: 2,
            data: nv
         }
      ]
   }

   // 3.3使用刚指定的配置项和数据显示图表。
   myChart.setOption(option)
}

// 地图-------------------------------------------------------------------
const di = data => {
   console.log(data)
   let myChart = echarts.init(document.querySelector('#map'));
   const newArr = data.map(item=>({name:item.name,value:item.value,}))
   // 3.2 指定图表的配置项和数据
   const dataList = newArr

   // 数据设置
   dataList.forEach((item) => {
      // 数据里名字和上面的名字有点不太一样, 需要把多余的文字去掉(替换成空字符串)
      item.name = item.name.replace(/省|回族自治区|吾尔自治区|壮族自治区|特别行政区|自治区/g, '')
   })

   let option = {
      title: {
         text: '籍贯分布',
         top: 10,
         left: 10,
         textStyle: {
            fontSize: 16,
         },
      },
      tooltip: {
         trigger: 'item',
         formatter: '{b}: {c} 位学员',
         borderColor: 'transparent',
         backgroundColor: 'rgba(0,0,0,0.5)',
         textStyle: {
            color: '#fff',
         },
      },
      visualMap: {
         min: 0,
         max: 6,
         left: 'left',
         bottom: '20',
         text: ['6', '0'],
         inRange: {
            color: ['#ffffff', '#0075F0'],
         },
         show: true,
         left: 40,
      },
      geo: { // 地理坐标系组件
         map: 'china',
         roam: false,
         zoom: 1.0,
         label: {
            normal: {
               show: true,
               fontSize: '10',
               color: 'rgba(0,0,0,0.7)',
            },
         },
         itemStyle: {
            normal: {
               borderColor: 'rgba(0, 0, 0, 0.2)',
               color: '#e0ffff',
            },
            emphasis: {
               areaColor: '#34D39A',
               shadowOffsetX: 0,
               shadowOffsetY: 0,
               shadowBlur: 20,
               borderWidth: 0,
               shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
         },
      },
      series: [{
         name: '籍贯分布',
         type: 'map',
         geoIndex: 0,
         data: dataList,
      }, ],
   }

   // 3.3使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
}